$panel-position: fixed
$panel-background: $global-background
$panel-size: 30%
$panel-header-height: $global-topbar-height

@mixin panel($name: panel, $side: right, $size: $panel-size, $position: fixed)
  .#{$name}
    @extend %panel

    position: $panel-position

    @if $side == right
      top: 0
      right: 0
      transform: translate3d(100%, 0, 0)
      box-shadow: -2px 0 10px rgba(0,0,0,0.1)
      width: calc(100% - 60px)
      min-height: 100%
      height: 100%

      @media #{$medium-up}
        width: $panel-size

    @if $side == left
      top: 0
      left: 0
      transform: translate3d(-100%, 0, 0)
      box-shadow: 2px 0 10px rgba(0,0,0,0.1)
      width: calc(100% - 60px)
      min-height: 100%
      height: 100%

      @media #{$medium-up}
        width: $panel-size

    @if $side == top
      top: 0
      left: 0
      right: 0
      transform: translate3d(0, -100%, 0)
      box-shadow: 0 2px 10px rgba(0,0,0,0.1)
      height: calc(100% - 200px)

      @media #{$medium-up}
        height: $panel-size

    @if $side == bottom
      bottom: 0
      left: 0
      right: 0
      transform: translate3d(0, 100%, 0)
      box-shadow: 0 -2px 10px rgba(0,0,0,0.1)
      height: calc(100% - 200px)

      @media #{$medium-up}
        height: $panel-size

  .#{$name}--active

    .#{$name}
      transform: translate3d(0, 0, 0)

+panel(panel, right)

%panel
  overflow: auto
  z-index: z-index(panel)
  background: $panel-background
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)

.panel__header
  @extend .typo__h4

  line-height: rem($panel-header-height)
  display: block
  text-align: center
  margin-bottom: rem($global-v-gutter)
  border-bottom: $hr-border


// TODO: Needs refactor
.panel__close
  display: block
  cursor: pointer
  position: absolute
  transition: opacity .2s ease
  padding: 0
  background: none
  border: none
  z-index: 2
  transform: translate3d(0, 0, 0)
  top: rem($global-v-gutter)
  left: rem($global-gutter / 2)
  line-height: 1

  &:before
    content: "\d7"
    font-size: rem(20px)
    color: $secondary-color
    display: block
    z-index: 2
    transform: scale(1.6)
    transition: transform 0.3s cubic-bezier(0.51, -0.15, 0.48, 1.24), color 0.2s ease-in-out

  &:after
    content: ""
    z-index: -1
    position: absolute
    border-radius: 100%
    transform: scale(0)
    display: block
    background: $secondary-color
    transition: transform .2s cubic-bezier(0.54, -0.46, 0.36, 1.79)
    top: rem(-8px)
    left: rem(-9px)
    height: rem(32px)
    width: rem(32px)

  &:hover, &:focus

    &:before
      color: $global-background
      transform: scale(1)

    &:after
      transform: scale(1)
